<template>
  <div>
      <el-form :model="form" label-width="auto">
          <el-form-item label="月份">
              <el-date-picker
                  v-model="form.value1"
                  type="month"
                  placeholder="请选择"
              />
          </el-form-item>
          <el-form-item label="网点" class="ma-left20">
              <el-select
                  v-model="form.value2"
                  multiple
                  collapse-tags
                  placeholder="请选择"
                  style="width: 240px"
                  >
                  <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
              </el-select>
          </el-form-item>
          <el-form-item label="工程师">
            <el-autocomplete
              v-model="form.input"
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入"
              @select="handleSelect"
            />
          </el-form-item>
          <el-form-item label="订单号">
            <el-input
              v-model="form.input1"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
      </el-form>
  </div>
  <div>
      <el-table :data="tableData" style="width: 100%" show-summary border sum-text='合计' height="500">
        <el-table-column prop="address" label="账单编号" width="200" />
          <el-table-column prop="address" label="账期" width="150" />
          <el-table-column prop="state" label="订单号" width="120" />
          <el-table-column prop="city" label="维修中心" width="120" />
          <el-table-column prop="zip" label="工程师" width="120" />
          <el-table-column prop="state" label="订单状态" width="120" />
          <el-table-column prop="city" label="收款金额" width="120" />
          <el-table-column prop="address" label="按单分成" />
          <el-table-column prop="zip" label="基础分成" width="120" />
          <el-table-column prop="state" label="浮动分成" width="120" />
          <el-table-column prop="city" label="分成收入" width="120" />
          <el-table-column prop="address" label="配件收入" />
          <el-table-column prop="zip" label="保险费支出" width="120" />
          <el-table-column prop="city" label="结算金额" width="120" />
          <el-table-column prop="address" label="申述载止时间" />
          <el-table-column fixed="right" label="操作" min-width="240">
            <template #default>
              <el-button link type="primary" size="small" @click="handleClick">
                申述
              </el-button>
            </template>
          </el-table-column>         
      </el-table>
  </div>
</template>


<script setup>

import { ref, onMounted } from 'vue'
const form = ref({
  value1:'',
  value2:[],
  input:'',
  input1:''
})
const options = ref([
{
  value: '选项1',
  label: '黄金糕',
},
{
  value: '选项2',
  label: '双皮奶',
},
{
  value: '选项3',
  label: '蚵仔煎',
},
{
  value: '选项4',
  label: '龙须面',
},
{
  value: '选项5',
}
])

const tableData =  ref([
{
  date: '2016-05-03',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
},
{
  date: '2016-05-02',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
},
{
  date: '2016-05-04',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
},
{
  date: '2016-05-01',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
},
{
  date: '2016-05-08',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
},
{
  date: '2016-05-06',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
},
{
  date: '2016-05-07',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
},
])

const onSubmit = () => {
  console.log(form.value.value1);
  console.log(form.value.value2);
  console.log(form.value.input);

//   const date = new Date(value.value);
//   const formattedDate = date.toLocaleDateString('en-CA');
//   console.log(formattedDate);
}

const links = ref([])
const loadAll = () => {
return [
  { value: 'vue', link: 'https://github.com/vuejs/vue' },
  { value: 'element', link: 'https://github.com/ElemeFE/element' },
  { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
  { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
  { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
  { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
  { value: 'babel', link: 'https://github.com/babel/babel' },
]
}
let timeout
const querySearchAsync = (queryString, cb) => {
const results = queryString
  ? links.value.filter(createFilter(queryString))
  : links.value

clearTimeout(timeout)
timeout = setTimeout(() => {
  cb(results)
}, 3000 * Math.random())
}
const createFilter = (queryString) => {
return (restaurant) => {
  return (
    restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
  )
}
}

const handleSelect = (item) => {
  console.log(item)
}
const handleClick = () => {
  console.log('click');
}

onMounted(() => {
  links.value = loadAll()
})

</script>

<style>
.el-form {
  display: flex;
}
.el-form-item {
  margin-left: 20px;
}
.el-table thead.is-group th.el-table__cell {
background-color: #fff;
}
</style>